<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('添加部门')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">

            <div class="layui-form-item">
                <label for="deptTree" class="layui-form-label">
                    <span class="x-red">*</span>上级部门
                </label>
                <div class="layui-input-block">
                    <input type="text" id="deptTree" required="" lay-verify="deptTree"
                           autocomplete="off" class="layui-input" th:value="${parentDept.deptName}">
                    <input type="text" hidden="true" id="parentId" name="parentId" th:value="${parentDept.deptId}">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="deptName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="deptName" name="deptName" th:value="${sysDept.deptName}" required="" lay-verify="required|deptName"
                           autocomplete="off" class="layui-input">
                    <input type="text" hidden="true" id="deptId" name="deptId" th:value="${sysDept.deptId}">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="leader" class="layui-form-label">
                    <span class="x-red">*</span>负责人
                </label>
                <div class="layui-input-block">
                    <input type="text" id="leader" name="leader" th:value="${sysDept.leader}" required="" lay-verify="leader"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>联系方式
                </label>
                <div class="layui-input-block">
                    <input type="text" id="phone" name="phone" th:value="${sysDept.phone}" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="email" class="layui-form-label">
                    <span class="x-red">*</span>电子邮箱
                </label>
                <div class="layui-input-block">
                    <input type="text" id="email" name="email" th:value="${sysDept.email}" required="" lay-verify="email"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="orderNum" class="layui-form-label">
                    <span class="x-red">*</span>显示顺序
                </label>
                <div class="layui-input-block">
                    <input type="text" id="orderNum" name="orderNum" th:value="${sysDept.orderNum}" required="" lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="visible" class="layui-form-label">
                    <span class="x-red">*</span>部门状态
                </label>
                <div class="layui-input-block" id="visible">
                    <input type="radio" name="status" value="0" title="正常" th:checked="${sysDept.status=='0'? true:false}">
                    <input type="radio" name="status" value="1" title="停用" th:checked="${sysDept.status=='1'? true:false}">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="edit" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<th:block th:include="include :: dtree_js"/>
<script>

    layui.use(['form', 'layer', 'dtree'],
    function () {
        $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var dtree = layui.dtree;


        //部门树 下拉
        $('#deptTree').click(function () {
            var deptTree = null;
            layer.open({
                type: 1,
                title: '部门树',
                area: ["500px", "80%"],
                content: '<ul id="DeptTree" class="dtree" data-id="0"></ul>',
                success: function (layero, index) {

                    deptTree = dtree.render({
                        elem: '#DeptTree',
                        url: ctx + 'system/dept/detpDtree',
                        method: 'POST',
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        icon: ["0", "5"],
                        response: {
                            statusName: "code", //返回标识（必填）
                            statusCode: 0, //返回码（必填）
                            message: "msg", //返回信息（必填）
                            rootName: "data", //根节点名称（必填）
                            treeId: "id", //节点ID（必填）
                            parentId: "parentId", //父节点ID（必填）
                            title: "title", //节点名称（必填）
                        },
                        success: function (data, ul, first) {
                            // console.log(data);
                        },

                    });

                    // 绑定节点的双击
                    dtree.on("nodedblclick('DeptTree')", function (obj) {
                        let currentDeptId=$('#deptId').val();
                        if(obj.param.nodeId==currentDeptId)
                        {
                            layer.msg("选择的上级部门与当前部门一致，请重新选择上级部门");
                            return;
                        }

                        $("#deptTree").val(obj.param.context);
                        $("#parentId").val(obj.param.nodeId);
                        layer.close(index);
                    });
                },

                yes: function (_index, _layero) {
                    var param = dtree.getNowParam("DeptTree"); // 获取当前选中节点

                    $("#deptTree").val(param.context);
                    $("#parentId").val(param.nodeId);
                    layer.close(index);
                }
            });
        });


        form.on('submit(edit)',function (_data) {
            // layer.msg(JSON.stringify(_data));
            $.ajax({
               url: ctx +'system/dept/update' ,
                type: 'POST',
                data: _data.field,
                success:function (res) {
                   layer.msg(res.msg);
                   if(res.code==0){
                       //关闭当前frame
                       xadmin.close();
                       // 可以对父窗口进行刷新
                       xadmin.father_reload();
                   }

                }
            });
            return false;
        });

    })


</script>
</body>
</html>